<script setup lang="ts">
import { ref, onUpdated, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { contribution, links, ciDoc, starLink } from '@/utils/constants';
import { IVersionVo } from '@/api/dto/version';
import { queryVersion } from '@/api/version';

const route = useRoute();
const isActive = ref<boolean>(false);
const toggle = () => {
  isActive.value = !isActive.value;
};
// 菜单显隐
const menuVisible = ref<boolean>(false);
document.body.style.overflow = '';
// 打开菜单
const openMenu = () => {
  menuVisible.value = true;
  // 打开菜单溢出部分不滚动
  // document.body.style.overflow = 'hidden';
};
// 关闭菜单
const closeMenu = () => {
  menuVisible.value = false;
  // 关闭菜单后溢出滚动
  // document.body.style.overflow = '';
};
onUpdated(() => {
  document.body.style.overflow = menuVisible.value ? 'hidden' : '';
});
const release = ref<IVersionVo>();
onMounted(async () => {
  const result = await queryVersion();
  release.value = result[0];
});
const toRelease = () => {
  window.open(`${release.value?.releaseUrl}/${release.value?.versionNo}`, '_self');
};
</script>

<template>
  <!-- logo -->
  <div
    class="official-logo-container border-bottom-common"
    v-show="!menuVisible"
  >
    <div class="official-logo">
      <router-link :to="{name:'index'}">
        <img src="@/assets/wap/svgs/logo.svg">
      </router-link>
      <span class="logo-text">
        建木
      <div class="release" @click="toRelease" v-if="release">
        {{ release.versionNo }}
      </div></span>
    </div>
    <img
      class="menu"
      src="@/assets/wap/svgs/menu.svg"
      @click="openMenu"
    >
  </div>
  <!-- 激活状态顶部 -->
  <div
    v-show="menuVisible"
    class="menu-active"
  >
    <div class="official-logo">
      <router-link :to="{name:'index'}">
        <img src="@/assets/wap/svgs/logo.svg">
      </router-link>
      <span class="logo-text">建木</span>
    </div>
    <img
      class="menu"
      src="@/assets/wap/svgs/close.svg"
      @click="closeMenu"
    >
  </div>
  <!-- 菜单蒙层 -->
  <div
    class="menu-mantle"
    v-if="menuVisible"
    @touchmove.prevent
  >

    <!-- star-link -->
    <div class="star-link">
      <a :href="contribution">
        <img :src="starLink"/>
      </a>
    </div>
    <!-- 链接容器 -->
    <div class="link-container">
      <div class="drop-down" @click="toggle">
        项目
        <i :class="['drop-down-icon',isActive?'active':'']"></i>
      </div>
      <div class="show-more" v-if="isActive">
        <a href="https://ci.jianmu.dev">建木CI</a>
        <a href="https://jianmu.opencla.org/">OpenCLA</a>
      </div>
      <a href="https://jianmuhub.com/">建木Hub</a>
      <a :href="ciDoc">文档</a>
      <a href="https://blog.jianmu.dev/">博客</a>
      <router-link :to="{name:'contributor'}" :class="[route.path==='/contributor'?'link-active':'']">
        <span>贡献者</span>
      </router-link>
      <a :href="links.Assessment">生态评估</a>
      <a :href="links.Duguang">商业支持</a>
    </div>
  </div>
</template>

<style scoped lang="less">
// logo
.official-logo-container, .menu-active {
  width: 100%;
  padding: 33px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .official-logo {
    display: flex;
    align-items: center;

    img {
      width: 201px;
      height: 54px;
    }

    .logo-text {
      font-size: 36px;
      font-weight: 800;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      margin-left: 20px;
      border-left: 1px solid #c2dfff;
      position: relative;

      .release {
        position: absolute;
        top: -30px;
        left: 78px;
        margin-left: 20px;
        text-align: center;
        color: #FFFFFF;
        box-sizing: border-box;
        height: 34px;
        min-width: 83px;
        border-radius: 18px 18px 18px 0px;
        padding: 1px 12px;
        background: #FF6A4D;
        font-weight: 500;
        font-size: 22px;
        line-height: 32px;

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: -7px;
          left: 0;
          width: 10px;
          height: 8px;
          background: url("@/assets/wap/svgs/shap.svg") no-repeat;
          background-size: 100%;
        }
      }
    }
  }

  .menu {
    width: 36px;
    height: 36px;
  }
}

// 菜单激活状态顶部
.menu-active {
  background: #F0F7FF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

// 菜单蒙层
.menu-mantle {
  width: 100%;
  height: calc(100vh - 120px);
  z-index: 101;
  background: #F6FAFF;
  opacity: .96;
  position: fixed;
  left: 0px;
  top: 122px;

  .star-link {
    width: 100%;
    padding: 0 60px;
    margin-top: 72px;

    a {
      width: 50%;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }

  // 链接容器
  .link-container {
    .drop-down {
      margin-bottom: 50px;
      font-size: 36px;
      color: #012C53;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .drop-down-icon {
        transition: all 0.2s linear;

        &.active {
          transform: rotate(0deg);
        }

        margin-right: 30px;
        width: 32px;
        height: 32px;
        background-image: url("@/assets/wap/svgs/drop-down.svg");
        transform: rotate(180deg);
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }

    .show-more {
      a {
        font-size: 32px;
        color: #4E7090;
      }
    }

    .link-active {
      color: #096DD9;
    }

    padding: 97px 0 0 60px;

    a {
      display: block;
      margin-bottom: 50px;
      font-size: 36px;
      color: #012C53;

      &:active,
      &:visited,
      &:link {
        text-decoration: none;
      }
    }
  }
}

// 建木描述
.official-description-container {
  width: 100%;
  height: 322px;
  padding: 60px 30px 55px 30px;
  background-image: url('@/assets/wap/pngs/jianmu-tree.png');
  background-size: 100%;
  position: relative;
  z-index: 100;

  .jianmu-description-img {
    width: 690px;
    height: 207px;
    background: url('@/assets/wap/pngs/jianmu-description.png');
    background-size: 100%;
  }
}

// 公共样式-下边框
.border-bottom-common {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
